<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>03-品牌列表案例</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <script src="./lib/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- panel 面板 -->
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body">
                <div class="form-group form-inline">

                    <!-- <div class="input-group">
                        <div class="input-group-addon">编号</div>
                        <input type="text" class="form-control" v-model="id">
                    </div> -->

                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <input type="text" class="form-control" v-model="name">
                    </div>
                    <div class="input-group">
                        <div class="input-group-addon">人数</div>
                        <input type="text" class="form-control" v-model="number">
                    </div>

                    <div class="input-group">
                        <div class="input-group-addon">资本</div>
                        <input type="text" class="form-control" v-model="capital">
                    </div>

                    <div class="input-group">
                        <div class="input-group-addon">地址</div>
                        <input type="text" class="form-control" v-model="address">
                    </div>

                    <div class="input-group">
                        <button class="btn btn-primary" @click="add">添加</button>
                    </div>

                    <div class="input-group">
                        <div class="input-group-addon">按名称搜索</div>
                        <input type="text" class="form-control" v-model="keywords">
                    </div>

                </div>
            </div>
        </div>

        <!-- 表格区域 -->
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>人数</th>
                    <th>资本</th>
                    <th>地址</th>
                    <th>添加时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody v-cloak>
                <tr v-for="item in show()" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.number}}</td>
                    <td>{{item.capital}}</td>
                    <td>{{item.address}}</td>
                    <td>{{item.ctime | dateFromat}}</td>
                    <td>
                        <a href="#" @click="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        Vue.filter('dateFromat', function (originVal) {
            // console.log(originVal);
            let date = new Date(originVal);
            // console.log(date);
            let year = date.getFullYear();
            let month = (date.getMonth() + 1).toString().padStart(2, '0');
            let dt = (date.getDate()).toString().padStart(2, '0');
            let hours = (date.getHours()).toString().padStart(2, '0');
            let minu = (date.getMinutes()).toString().padStart(2, '0');
            let secon = (date.getSeconds()).toString().padStart(2, '0');
            return `${year}/${month}/${dt}    ${hours}:${minu}:${secon}`;
        });

        let vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                number: '',
                capital: '',
                address: '',
                keywords: '',
                birst: [{
                    id: 1,
                    name: '百度',
                    number: '20000',
                    capital: '1000万元',
                    address: '北京',
                    ctime: new Date()
                },
                {
                    id: 2,
                    name: '小米',
                    number: '10000',
                    capital: '5000万元',
                    address: '北京',
                    ctime: new Date()
                },
                {
                    id: 3,
                    name: '腾讯',
                    number: '30000',
                    capital: '1000万元',
                    address: '北京',
                    ctime: new Date()
                },
                {
                    id: 4,
                    name: '阿里',
                    number: '10000',
                    capital: '2000万元',
                    address: '北京',
                    ctime: new Date()
                },
                {
                    id: 5,
                    name: '亚马逊',
                    number: '10000',
                    capital: '3000万元',
                    address: '北京',
                    ctime: new Date()
                }
                ]
            },
            methods: {
                show() {
                    const str = this.birst.filter(item => item.name.includes(this.keywords));
                    return str;
                },
                // 删除
                del(id) {
                    const index = this.birst.findIndex(item => item.id == id);
                    this.birst.splice(index, 1);
                },
                // 添加
                add() {
                    if (!(this.name)) return alert('名称不能为空!');

                    // 判断名称
                    if (!(/^[\u4e00-\u9fa5]{5,20}/.test(this.name))) {
                        return alert('名称为5-20个字之间!');
                    }

                    // 判断人数
                    if (!(/^[0-99999]\d*$/.test(this.number))) {
                        return alert('人数为大于0小于等于99999之间的正整数');
                    }

                    // 判断资本
                    if (!(/^(0|[0-99999]\d{0,3})(\.\d{1,2})?$/.test(this.capital))) {
                        return alert('资本为大于0小于999999之间（保留小数点后两位）');
                    }

                    // 判断地址
                    if (!(/^[\u4e00-\u9fa5]{2,50}/.test(this.address))) {
                        return alert('地址为20到50之间（包含20和50个）的字符串');
                    }

                    const data = {
                        id: this.birst.length + 1,
                        name: this.name,
                        number: this.number,
                        capital: this.capital + '万元',
                        address: this.address,
                        ctime: new Date()
                    };
                    this.name = this.number = this.capital = this.address = '';
                    this.birst.push(data);
                }
            }
        })
    </script>
</body>

</html>